<template>
	<div>
		<cl-crud @load="onLoad">
			<!-- 筛选 -->
			<template #slot-filter>
				<div class="filter-box">
					<el-select
						size="mini"
						filterable
						v-model="select.filters"
						placeholder="全部"
						style="margin-right: 10px;width:125px;margin-left:10px"
						@change="val => crud.refresh({ type: val })"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="签到" :value="0"></el-option>
						<el-option label="每日任务" :value="1"></el-option>
						<el-option label="首次任务" :value="2"></el-option>
						<el-option label="长期任务" :value="3"></el-option>
					</el-select>
				</div>
			</template>

			<template #table-column-key="{scope}">
				<el-tag type="success">{{ scope.row.key }}</el-tag>
			</template>

			<template #table-column-type="{scope}">
				<el-tag v-if="scope.row.type == 0">签到</el-tag>
				<el-tag v-else-if="scope.row.type == 1">每日任务</el-tag>
				<el-tag v-else-if="scope.row.type == 2">首次任务</el-tag>
				<el-tag v-else-if="scope.row.type == 3">长期任务</el-tag>
			</template>

			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 0">禁用</el-tag>
				<el-tag type="success" v-else-if="scope.row.status == 1">启用</el-tag>
			</template>

			<template #table-column-icon="{scope}">
				<img :src="scope.row.icon" class="table-icon" />
			</template>

			<cl-form ref="cl-form"></cl-form>
		</cl-crud>
	</div>
</template>

<script>
import platform from '@/mixin/platform';

export default {
	data() {
		return {
			crud: null,
			options: [],
			select: {
				filters: ''
			}
		};
	},
	mixins: [platform],
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.integralMall.taskList)
				.set('dict', {
					label: {
						add: '添加任务'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '任务key',
							prop: 'key',
							align: 'center'
						},
						{
							label: '任务类型',
							prop: 'type',
							align: 'center'
						},
						{
							label: '任务名称',
							prop: 'title',
							align: 'center'
						},
						{
							label: '积分值',
							prop: 'score',
							align: 'center'
						},
						{
							label: '额外积分',
							prop: 'extraScore',
							align: 'center'
						},
						{
							label: '任务规则',
							prop: 'content',
							align: 'center'
						},
						{
							label: '图标',
							prop: 'icon',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							width: 220,
							align: 'center'
						},
						{
							label: '按钮有效状态',
							prop: 'btnEnableStr',
							align: 'center'
						},
						{
							label: '按钮失效状态',
							prop: 'btnDisbleStr',
							align: 'center'
						},
						{
							label: '跳转链接',
							prop: 'url',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							width: 60,
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center',
							width: 70
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '112px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '任务key',
							prop: 'key',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入任务key'
								}
							},
							rules: {
								required: true,
								message: '请输入任务key'
							}
						},
						{
							label: '积分值',
							prop: 'score',
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入积分值',
									type: 'number'
								}
							},
							rules: {
								required: true,
								message: '请输入积分值'
							}
						},
						{
							label: '额外积分',
							prop: 'extraScore',
							value: 0,
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入额外积分',
									type: 'number'
								}
							}
						},
						{
							label: '任务名称',
							prop: 'title',
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入任务名称'
								}
							},
							rules: {
								required: true,
								message: '请输入任务名称'
							}
						},
						{
							label: '任务类型',
							prop: 'type',
							span: 12,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								props: {
									clearable: true
								},
								options: [
									{
										label: '签到',
										value: 0
									},
									{
										label: '每日任务',
										value: 1
									},
									{
										label: '首次任务',
										value: 2
									},
									{
										label: '长期任务',
										value: 3
									}
								]
							},
							rules: {
								required: true,
								message: '任务类型不能为空'
							}
						},
						{
							label: '图标',
							prop: 'icon',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							label: '任务规则',
							prop: 'content',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入任务规则',
									type: 'textarea'
								}
							}
						},
						{
							label: '按钮有效状态',
							prop: 'btnEnableStr',
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入有效状态'
								}
							}
						},
						{
							label: '按钮失效状态',
							prop: 'btnDisbleStr',
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入失效状态'
								}
							}
						},
						{
							label: '跳转链接',
							prop: 'url',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入跳转链接'
								}
							}
						},
						{
							label: '排序',
							prop: 'level',
							span: 13,
							value: 0,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入排序',
									type: 'number'
								}
							},
							rules: {
								required: true,
								message: '请输入排序'
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',

								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						},
						{
							label: '备注',
							prop: 'remark',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入备注'
								}
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					if (isEdit) {
						this.crud.setData('upsert.items[prop:key].component.attrs.disabled', true);
						this.crud.setData('upsert.items[prop:type].component.attrs.disabled', true);
						this.crud.setForm('status', data.status == 1 ? true : false);
					} else {
						this.crud.setData(
							'upsert.items[prop:type].component.attrs.disabled',
							false
						);
						this.crud.setData('upsert.items[prop:key].component.attrs.disabled', false);
					}
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						delete data.status;
						var key;
						next({
							...data,
							key: key
						});
					} else {
						delete data.status;
						next({
							...data
						});
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'slot-filter', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>
<style scoped>
.table-icon {
	width: 42px;
	height: auto;
}
</style>
